<!--
 * @Author: zxh
 * @Email: 1271027008@qq.com
 * @Date: 2020-02-26 09:23:40
 * @Descripttion: 库房批次预留
 -->

<div class="batchreserved-list">
  <div nz-row nzGutter="5" class="row_1">
    <div nz-col nzSpan="6">
      <button *ngIf="power.add" nz-button nzType="primary" (click)="showModal(1)"><i nz-icon
          nzType="plus"></i>新增</button>
      <button *ngIf="power.edit" nz-button nzType="" [disabled]="numberOfChecked!==1" (click)="showModal(2)"
        [class]="numberOfChecked!==1?'ant-btn ant-btn-primary disabledBg':'ant-btn ant-btn-primary'"><i nz-icon
          nzType="edit"></i>修改</button>
      <button *ngIf="power.cancel" nz-button (click)="cancelYL()" nzType="" [disabled]="numberOfChecked==0"
        [class]="numberOfChecked==0?'ant-btn ant-btn-primary disabledBg':'ant-btn ant-btn-primary'">取消预留</button>
    </div>
    <div nz-col nzSpan="3">
      <!-- <label>物料编码：</label> -->
      <input nz-input placeholder="输入物料编码" appHotSearch (hotSearchEmit)="getYLList('search')"
        [(ngModel)]="materialCode" />
    </div>
    <div nz-col nzSpan="3">
      <!-- <label>物料名称：</label> -->
      <input nz-input placeholder="输入物料名称" appHotSearch (hotSearchEmit)="getYLList('search')"
        [(ngModel)]="materialName" />
    </div>
    <div nz-col nzSpan="5">
      <label>操作人员：</label>
      <!-- <input class="width-70" nz-input placeholder="请输入操作员编号" appHotSearch (hotSearchEmit)="getYLList('search')"
        [(ngModel)]="operateCode" /> -->
      <nz-select nzDropdownClassName="select_custom" [(ngModel)]="selectedUserId" style="width: 68%;"
        (ngModelChange)="selectedUser($event)">
        <nz-option nzValue="" nzLabel="-请选择-"></nz-option>
        <nz-option *ngFor="let item of userList" [nzValue]="item.id" [nzLabel]="item.nickName"></nz-option>
      </nz-select>
    </div>
    <div nz-col nzSpan="7">
      <div nz-col nzSpan="5" style="line-height: 32px;text-align: right;">
        库房库区:
      </div>
      <div nz-col nzSpan="19">
        <nz-select nzDropdownClassName="select_custom" [(ngModel)]="kfID" style="width: 47%;"
          (ngModelChange)="selectedKF($event)">
          <nz-option nzValue="" nzLabel="-请选择-"></nz-option>
          <nz-option *ngFor="let item of KFList" [nzValue]="item.id" [nzLabel]="item.name"></nz-option>
        </nz-select>
        -
        <nz-select nzDropdownClassName="select_custom" [(ngModel)]="kqID" style="width: 47%;"
          (ngModelChange)="selectedKQ($event)">
          <nz-option nzValue="" nzLabel="-请选择-"></nz-option>
          <nz-option *ngFor="let item of KQList" [nzValue]="item.id" [nzLabel]="item.name"></nz-option>
        </nz-select>
      </div>
    </div>
  </div>
  <div nz-row class="marginTop15">
    <nz-table #basicTable [nzData]="listOfAllData" [nzFrontPagination]="false"
      (nzCurrentPageDataChange)="currentPageDataChange($event)" nzSize="small" >
      <thead>
        <tr>
          <th nzShowCheckbox [(nzChecked)]="isAllDisplayDataChecked" [nzIndeterminate]="isIndeterminate"
            (nzCheckedChange)="checkAll($event)"></th>
          <th>物料编码</th>
          <th>物料名称</th>
          <th>条码批次</th>
          <th>库存量</th>
          <th>是否预留</th>
          <th>操作人员</th>
          <th>预留量</th>
          <th>预留原因</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of basicTable.data">
          <td nzShowCheckbox [(nzChecked)]="mapOfCheckedId[data.id]" [nzDisabled]="data.disabled"
            (nzCheckedChange)="refreshStatus()"></td>
          <td>{{ data.materialCode }}</td>
          <td>{{ data.materialName }}</td>
          <td>{{ data.barcodeBatch }}</td>
          <td>{{ data.weight }}</td>
          <td>{{ data.isReserve?'是':'否' }}</td>
          <td>{{ data.createByName }}</td>
          <td>{{ data.reserveNum }}</td>
          <td>{{ data.reserveReason }}</td>
        </tr>
      </tbody>
    </nz-table>
  </div>
  <div nz-row class="marginTop15" style="text-align: right;">
    <nz-pagination (nzPageIndexChange)="clickPage($event)" [(nzPageSize)]="pageSize" [(nzPageIndex)]="curPage"
      [nzTotal]="totalSize" [nzShowTotal]="totalTemplate">
    </nz-pagination>
    <ng-template #totalTemplate let-total> 总共 {{ totalSize }} 条 </ng-template>
  </div>
</div>
<div id="modal_box"></div>
<nz-modal appDragModal nzMaskClosable="false" [nzGetContainer]="modalDomBox" class="yl_modal"
  [(nzVisible)]="isShowModal" [nzTitle]="modalType==1?'新增库房批量预留':'修改库房批量预留'" (nzOnCancel)="handleCancel()"
  [nzFooter]="null">
  <form nz-form [formGroup]="ylForm" (ngSubmit)="submitForm()">
    <div nz-row nzGutter="16">
      <div *ngIf="modalType==1" nz-col nzSpan="12">
        <nz-form-item>
          <nz-form-label [nzSpan]="8" nzRequired>库房</nz-form-label>
          <nz-form-control [nzSpan]="16" nzErrorTip="请选择库房！">
            <nz-select nzDropdownClassName="select_custom" [nzDisabled]="modalType==2" class="select_term"
              formControlName="warehouseId" (ngModelChange)="selectKfModal($event)">
              <nz-option *ngFor="let item of KFList" [nzValue]="item.id" [nzLabel]="item.name">
              </nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div *ngIf="modalType==1" nz-col nzSpan="12">
        <nz-form-item>
          <nz-form-label [nzSpan]="8" nzRequired>库区</nz-form-label>
          <nz-form-control [nzSpan]="16" nzErrorTip="请选择库区！">
            <nz-select nzDropdownClassName="select_custom" [nzDisabled]="modalType==2" class="select_term"
              formControlName="warehouseAreaId" (ngModelChange)="selectKqModal($event)">
              <nz-option nzValue="" nzLabel="-请选择-"></nz-option>
              <nz-option *ngFor="let item of modalKQ" [nzValue]="item.id" [nzLabel]="item.name">
              </nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row nzGutter="16">
      <div nz-col nzSpan="12">
        <nz-form-item>
          <nz-form-label *ngIf="modalType==1" [nzSpan]="8" nzRequired>物料编码</nz-form-label>
          <nz-form-control *ngIf="modalType==1" [nzSpan]="16" nzErrorTip="请选择物料编码！">
            <nz-select nzDropdownClassName="select_custom" class="select_term" formControlName="materialId"
              (ngModelChange)="selectWlModal($event)">
              <nz-option nzValue="" nzLabel="-请选择-"></nz-option>
              <nz-option *ngFor="let item of materialList" [nzValue]="item.materialCode" [nzLabel]="item.materialCode">
              </nz-option>
            </nz-select>
          </nz-form-control>
          <nz-form-label *ngIf="modalType==2" [nzSpan]="8">物料编码</nz-form-label>
          <nz-form-control *ngIf="modalType==2" [nzSpan]="16">
            <input nz-input [value]="curMetrialCode" readonly />
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan="12">
        <nz-form-item>
          <nz-form-label [nzSpan]="8">物料名称</nz-form-label>
          <nz-form-control [nzSpan]="16">
            <input nz-input [value]="curMetrialName" readonly />
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row nzGutter="16">
      <div nz-col nzSpan="12">
        <nz-form-item>
          <nz-form-label [nzSpan]="8" nzRequired>批次</nz-form-label>
          <nz-form-control [nzSpan]="16" nzErrorTip="请选择批次！">
            <nz-select nzDropdownClassName="select_custom" *ngIf="modalType!==2" class="select_term"
              formControlName="stockBatchId">
              <nz-option nzValue="" nzLabel="-请选择-"></nz-option>
              <nz-option *ngFor="let item of pcList" [nzValue]="item.id" [nzLabel]="item.barcodeBatch">
              </nz-option>
            </nz-select>
            <!-- <input *ngIf="modalType==2" nz-input formControlName="stockBatchId" readonly /> -->
            <input *ngIf="modalType==2" nz-input formControlName="barcodeBatch" readonly />
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan="12">
        <nz-form-item>
          <nz-form-label [nzSpan]="8" nzRequired>数量</nz-form-label>
          <nz-form-control [nzSpan]="16" nzErrorTip="请输入数量！">
            <input type="number" nz-input formControlName="reserveNum" />
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row>
      <div nz-col nzSpan="12">
        <nz-form-item>
          <nz-form-label [nzSpan]="8">预留原因</nz-form-label>
          <nz-form-control [nzSpan]="16">
            <textarea rows="4" nz-input formControlName="reserveReason"></textarea>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan="12" *ngIf="modalType!==1">
        <nz-form-item>
          <nz-form-label [nzSpan]="8">是否预留</nz-form-label>
          <nz-form-control [nzSpan]="16">
            <nz-switch formControlName="isReserve" nzCheckedChildren="是" nzUnCheckedChildren="否"></nz-switch>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div class="modal_footer">
      <button nz-button type="button" nzType="default" (click)="handleCancel()">取消</button>
      <button nz-button nzType="primary">确认</button>
    </div>
  </form>
</nz-modal>